<template>
<el-dialog
    :title="!dataForm.ptspid ? '新增' : '修改'"
    :close-on-click-modal="false"
    center
    width= 40%
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="170px">
        <el-form-item label="选择商品">
            <div v-if="dataForm.goodsid" class="prodBox">
                <span style="width:200px;margin:10px 0 0 10px">{{dataForm.goodsName}}</span>
                <img :src="dataForm.pic" alt="" style="width:140px;border-radius:5px">
            </div>          
            <div v-if="!dataForm.goodsid">
                <div v-if = '!prod' class="chosenBox" @click="enterChoseProd">
                    <div class="center">
                        <div class="border b1"></div>
                        <div class="border b2"></div>
                        <div class="border b3"></div>
                        <div class="border b4"></div>
                    </div>
                </div>
                <div v-if="prod" class="prodBox" @click="enterChoseProd">
                    <span style="width:200px;margin:10px 0 0 10px">{{dataForm.goodsName}}</span>
                    <img :src="dataForm.goodsImg" alt="" style="width:140px;border-radius:5px">
                </div>
            </div>
            {{dataForm.goodsImg}}
        </el-form-item>
        <el-form-item label="成团有效期(天)：" prop="ctyxsj">
            <el-input v-model="dataForm.ctyxsj"></el-input>
        </el-form-item>
        <el-form-item label="拼团价：" prop="ptj">
            <el-input v-model="dataForm.ptj"></el-input>            
        </el-form-item>
        <el-form-item label="拼团人数：" prop="xdrs">
            <el-input v-model="dataForm.xdrs"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取消</el-button>
    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <!-- 选择商品 -->
    <el-dialog
        title=""
        :visible.sync="choseProdVisible"
        :close-on-click-modal="false"
        top="8vh"
        center
        width="70%"
        append-to-body>
        <div style="height:70vh;overflow:auto">
        <avue-crud ref="crud"
                :data="prodList"
                :option="tableOption">
            <template slot-scope="scop" slot="menu">
                <el-button size="medium"   type="normal" @click.stop="choseProd(scop.row)">确定</el-button>
            </template>                
        </avue-crud>            
        </div>
        <div style="height:20px" slot="footer">
        </div>
    </el-dialog>



</el-dialog>
</template>

<script>
import { tableOption } from '@/crud/finance/prodList'
export default {
    data() {
        return {
            visible: false,
            choseProdVisible: false,
            tableOption: tableOption,
            dataForm:{
                goodsid:null,
                goodsImg: '',
                ctyxsj: '',
                ptj: null,
                xdrs: null,
                status: 0,   
                ptspid: '',             
            },
            prod:null,
            prodList: [],
            dataRule:{
                ctyxsj:[
                    { required: true, message: '请填写最大成团时间', trigger: 'blur'}
                ],
                ptj:[
                    { required: true, message: '请填写团购价', trigger: 'blur'}
                ],
                xdrs:[
                    { required: true, message: '请填写成团人数', trigger: 'blur'}
                ],
                
            }
        }
        
    },

    computed: {
        // activityTimesFlag(){
        //     if (this.dataForm.activityTimes == 0) {
        //         return 0
        //     }else if (this.dataForm.activityTimes>0) {
        //         return 1
        //     }
        // },
        // activityOrderFlag(){
        //     if (this.dataForm.activityOrderTimes == 0) {
        //         return 0
        //     }else if (this.dataForm.activityOrderTimes>0) {
        //         return 1
        //     }
        // }
    },
    
    props:{
    },

    methods: {
        init (row) {
            console.log(row);
            // 重置表格
            this.visible = true  
            this.dataForm = {
                goodsid:null,
                goodsImg: '',
                ctyxsj: '',
                ptj: null,
                xdrs: null,
                status: 0,       
                ptspid: null,           
            },            
            this.prod = null
            if (row.ptspid) {
                this.dataForm.ptspid = row.ptspid,
                this.dataForm.goodsid = row.goodsid,
                this.dataForm.goodsImg = 'https://images.51xeld.com/' + row.goodsImg
                this.dataForm.goodsName = row.goodsName
                this.dataForm.ctyxsj = row.ctyxsj
                this.dataForm.ptj = row.ptj
                this.dataForm.xdrs = row.xdrs
                // this.dataForm.activityId = row.activityId
                // this.dataForm.startTime = row.startTime
                // this.dataForm.endTime = row.endTime
            }
            console.log(this.dataForm)
            this.$http({
                url: this.$http.adornUrl("/yxPtsp/addPtsp"),
                method:'get'
            }).then(({data}) =>{
                this.prodList = data            
            })                
        },

        // 表单提交
        dataFormSubmit () {
            this.$refs['dataForm'].validate((valid) => {
            if (valid) {
                // console.log(this.amount,this.percent);
                console.log(this.dataForm.goodsid);
                if (!this.dataForm.goodsid) {
                    this.$message.error('请选择商品')
                    return
                }
                let url = this.dataForm.ptspid? '/yxPtsp/savePtsp': '/yxPtsp/add'
                this.$http({
                    url: this.$http.adornUrl(url),
                    method: 'post',
                    params: this.$http.adornParams(
                        Object.assign({
                            ptspid: this.dataForm.ptspid,
                            goodsid: this.dataForm.goodsid,
                            ctyxsj: this.dataForm.ctyxsj,
                            ptj: this.dataForm.ptj,
                            xdrs: this.dataForm.xdrs,
                            status: 0,
                            // activityOrderTimes: this.dataForm.activityOrderTimes,
                            // // activityTimes: 1,
                            // startTime: this.dataForm.startTime,
                            // endTime: this.dataForm.endTime,
                            // activityId: this.dataForm.activityId ,
                            // status: 0   
                        },)
                    )              
                }).then(({data}) => {
                        this.$message({
                            message:'操作成功',
                            type:'success'
                    })
                    this.visible = false
                    this.$emit("refreshDataList")
                })
            }
            })
        },

        enterChoseProd(){
            this.choseProdVisible = true
            
        },

        choseProd(row){
            this.prod = row
            this.dataForm.goodsid = row.prodId
            this.dataForm.goodsImg = row.pic
            this.dataForm.goodsName = row.goodsName
            this.choseProdVisible = false
        }
    },
}
</script>
<style lang="scss" scoped>
    .chosenBox{
        height: 148px;
        width: 148px;
        border: 1px dashed #C0CCDA;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #8C939D; 
        font-size: 48px;
        font-weight: 100;
        cursor: pointer;
    }
    .center{
        height: 26px;
        width: 26px;
        display: flex;
        flex-wrap: wrap;
    }
    .border{
        height: 13px;
        width: 13px;
        border: 1px solid white;
    }
    .b1,.b2{
        border-bottom: 1px solid #c0c0c0;
    }
    .b3,.b4{
        border-top: 1px solid #c0c0c0;
    }
    .b1,.b3{
        border-right: 1px solid #c0c0c0;
    }
    .b2,.b4{
        border-left: 1px solid #c0c0c0;
    }

    .prodBox{
        height: 140px;
        border: 1px solid #c0c0c0;
        width: 340px;
        border-radius: 5px;
        display: flex;
    }
    .el-input{
        width: 200px;
    }
</style>